<script setup>
import {ref,onMounted} from 'vue'
import axios from 'axios'
import {useRoute,useRouter} from 'vue-router'

const route = useRoute();
const router = useRouter(); 
const classify = ref([])
onMounted(async()=>{
  console.log(route.query.type);
  let type = route.query.type;
  let res =await axios.get(`http://127.0.0.1:7003/api/classify?type=${type}`);
  classify.value = res.data;
})
//跳转到详情页
function goDetails(v){
  router.push({path:'/detail',query:{id:v.id}});
}
</script>

<template>
  <div class="content-container">
    <ul>
      <li v-for="v in classify" :key="v.id">
        <div @click="goDetails(v)">
          <div class="content-img">
            <img :src="v.url" alt="">
          </div>
          <div class="content-title">{{v.title}}</div>
          <div class="contentlist">
              <img :src="v.img_url" alt="">
              <div class="contentlist-name">{{v.name}}</div>
              <div class="aixin">
                <i class="iconfont icon-aixin"></i>
                <span>{{v.count}}</span>
              </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<style scoped>

</style>
